<template>
	<wsPage :title="pageTitle+'banner'">
		<div slot="page_operate">
			<Button  @click="goback()"><Icon type="close"></Icon><span>关闭</span></Button>
		</div>
		<!--编辑界面-->
		<Form :model="bannerForm" ref="bannerForm" :rules="validate" :label-width="100">
			<Row>
				<Col :span="24">
					<div class="edit-button-self">
						<Button autofocus @click="handleOutLink()" class="outLink" id="outLinkcss">外部链接</Button>
						<Button @click="handleInsideLink()">本地链接</Button>
					</div>
				</Col>
				<Col :span="24">
					<FormItem prop="title" label="标题">
	            		<Input v-model="bannerForm.title" placeholder="请输入标题" class="ws-form-select"></Input>
	            	</FormItem>
				</Col>
				<Col :span="24">
					<FormItem label="URL" prop="url" v-if="isShowUrl==1">
	            		<Input v-model="bannerForm.url" placeholder="请输入链接URL" class="ws-form-select"></Input>
	            	</FormItem>
				</Col>
			    <Col :span="24">
			    	<Col span="2">
	                	<FormItem label="推广图片" prop="fileId">
			            	<ws-cropper :imageSrc="bannerForm.fileId" cropperId="cropper1.id" :fixed="cropper1.fixed" :fixedNumber="cropper1.fixedNumber" :dialogTitle="cropper1.title" @uploadSuccessEvent="uploadSuccessEvent1"></ws-cropper>
			            </FormItem>
		            </Col>
		            <Col span="10">
		            	<FormItem>
			            	<img :src="'/ws/img/view/'+bannerForm.fileId" v-if="bannerForm.fileId!=null && bannerForm.fileId!=''" style="width:100px; overflow:hidden;">
			            </FormItem>
		            </Col>
				</Col>
			</Row>
			<div class="edit-button-self">
				<Button type="primary" @click="bannerModalOk">保存</Button>
				<Button @click="bannerModalCancel">取消</Button>
			</div>
		</Form>
		
		<wsModal v-model="bannerDataModal.show" ok-text="确定" cancel-text="关闭" :title="'本地链接数据选择'" @on-ok="bannerDataModalInsert" @on-cancel="bannerDataModalClose">
		<!-- <Modal v-model="bannerDataModal.show" ok-text="确定" cancel-text="关闭" :title="'本地链接数据选择'" @on-ok="bannerDataModalInsert" @on-cancel="bannerDataModalClose"> -->
		    <Form ref="bannerDataForm" :model="bannerDataModal.form" :label-width="100">
		       <Tabs type="card" @on-click="changeSelectLocalLinkType">
		       		<TabPane label="基地" name=1>
		       			<template>
							<Table highlight-row :columns="baseTable.columns" :data="baseTable.data" @on-current-change="setCurrent"></Table>
					 	</template>
		       		</TabPane>
		       		<TabPane label="资讯" name=2>
		       			<template>
							<Table highlight-row :columns="contentTable.columns" :data="contentTable.data" @on-current-change="setCurrent"></Table>
					 	</template>
		       		</TabPane>
		       		<TabPane label="商品" name=3>
		       			<template>
							<Table highlight-row :columns="productTable.columns" :data="productTable.data" @on-current-change="setCurrent"></Table>
					 	</template>
		       		</TabPane>
		        </Tabs>
		    </Form>		
		<!-- </Modal> -->	
		</wsModal>
	</wsPage>
</template>

<script>
	import Common from '../../../common/common.js';

 	export default {
		data() {
  			return {
  				pageTitle:'新增',
  				//截图工具
            	cropper1:{
                    id:'1',
                    title:'截图组件',
                    fixed: true,
                    fixedNumber: [16,9]
                },
                bannerId: null,
                selectLocalLinkType: 0,
                queryForm: {
                	name: ''
                },
                paramsBase: {
                	name: ''
                },
                paramsContent: {
                	name: ''
                },
                paramsProduct: {
                	name: '',
                	status: null
                },
                selectBannerVO:null,
                isShowUrl: 1,
                copyUrl: '',
				baseTable: {
					columns: [{
						title: '名称',
                        key: 'name',
                        align: 'center'
					},
					{
						title: '地址',
                        key: 'address',
                        align: 'center'
					}],
					data: [],
					page: {
						total: 0, //总条数
						pageNum: 1, //当前页
						pageSize: 10 //每页显示条数
					},
					currentRow: [], //选中
				},
				contentTable: {
					columns: [{
						title: '名称',
                        key: 'name',
                        align: 'center'
					},
					{
						title: '栏目',
                        key: 'columnName',
                        align: 'center'
					}],
					data: [],
					page: {
						total: 0, //总条数
						pageNum: 1, //当前页
						pageSize: 10 //每页显示条数
					},
					currentRow: [], //选中
				},
				productTable: {
					columns: [{
						title: '名称',
                        key: 'name',
                        align: 'center'
					},
					{
						title: '备注',
                        key: 'wDesc',
                        align: 'center'
					}],
					data: [],
					page: {
						total: 0, 		//总条数
						pageNum: 1, 	//当前页
						pageSize: 10 	//每页显示条数
					},
					currentRow: [], 	//选中
				},
				//编辑界面数据
				bannerDataModal: {
					show: false,
					bannerDataForm: {
						id: null,
					}
					// baseForm: {
					// 	id: null,
					// 	name: '',
					// 	address: ''
					// },
					// contentForm: {
					// 	id: null,
					// 	name: '',
					// 	columnName: '',
					// },
					// productFrom: {
					// 	id: null,
					// 	name: '',
					// 	wDesc: ''
					// }
				},
				bannerForm: {
					id: null,
					title: '',
					url: '',
					fileId: '',
					moduleId: null,
					moduleType: null,
					bannerType: null
				},
				validate: {
					title: [
						{ required: true, message: '请输入标题', trigger: 'blur' },
						{ min: 1, max: 30, message: '长度在 0 到 30 个字符', trigger: 'blur' }
					],
					url: [
						{ required: true, message: '请输入链接URL地址', trigger: 'blur' },
						{ min: 1, max: 128, message: '长度在 0 到 128 个字符', trigger: 'blur' }
					],
					fileId: [
						{ required: true, message: '请上传图片', trigger: 'blur' }
					]
				}
 			}
  		},
  		computed: {
			/**
			 * 表格行是否为选中状态
			 */
			isTableSelected() {
				return this.table.currentRow.length > 0;
			},
			isEdit() {
		      return !Util.vad.isBlank(this.bannerDataModal.id);
		    }
		},
  		mounted() {
			this.init();
		},
		methods: {
			init(){
				if(this.$route.query.id != null && this.$route.query.id != '') {
					this.pageTitle='编辑';
					this.bannerId = this.$route.query.id;
					this.queryById(this.bannerId);
				} else {
					this.pageTitle='新增';
					this.editClear();
				}
				
			},
  			/**
        	 * 图片上传成功事件
        	 */
            uploadSuccessEvent1(fileId){
                this.bannerForm.fileId = fileId;
            },
            /**
             * 返回列表页面 
             */
    	 	goback(){
    	 		this.$router.push({name: 'ops_banner_list'});
    	 	},
    	 	/**
    	 	 * 保存操作
    	 	 */
    	 	 bannerModalOk(){
    	 	 	this.$refs['bannerForm'].validate((valid) => {
					if (valid) {
						if(this.bannerId) {
							this.editDataDict();
						} else {
							this.saveDataDict();
						}                    
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
               });
    	 	 },
    	 	 /**
			 * 取消操作
			 */
			bannerModalCancel() {
				this.$router.push({name: 'ops_banner_list'});
			},
			/**
			 * 清空表单
			 */
			editClear(){
				this.bannerForm.title='';
				this.bannerForm.bannerType=null;
				this.bannerForm.moduleType=null;
				this.bannerForm.moduleId=null;
				this.bannerForm.url='';
				this.bannerForm.fileId='';
			},
			/**
			 * 关闭本地链接模态框 
			 */
			bannerDataModalClose(){
				this.bannerDataModal.show = false;
				if (this.bannerForm.bannerType != 2) {
					this.isShowUrl = 1;
				}
				this.bannerForm.url = this.copyUrl;
			},
			/**
			 * 表格单选
			 */
			setCurrent(row) {
		        this.selectBannerVO = row;
		    },
			/**
			 * 外部链接按钮
			 */
			handleOutLink(){
				this.isShowUrl = 1;
				this.bannerForm.url = this.copyUrl;
				this.bannerForm.bannerType = 1;
			},
			/**
			 * 本地链接按钮
			 */
			handleInsideLink(){
				this.titles = '';					//选中数据标题
				// this.formInline.title = '';		//查询条件
				this.bannerDataModal.show = true;	//显示tab页
				this.queryDataPage();				//跳转查询方法
				this.isShowUrl = 0;				//隐藏URL输入框
				this.copyUrl = this.bannerForm.url;//url值赋值给中间变量
				this.bannerForm.url = '';			//本地链接设置url为空
				this.bannerForm.bannerType = 2;
			},
  			/**
  			 * 修改本地链接选中类型
  			 */
  			changeSelectLocalLinkType(tab, event){
  				this.selectLocalLinkType = Number(tab);
				this.queryDataPage();  				
  			},
  			/**
  			 * 条件查询
  			 */
  			queryFun(){
				this.queryDataPage();
			},
  			/**
  			 * 重新根据选中类型查询分页数据
  			 */
  			queryDataPage(){
  				switch(this.selectLocalLinkType){
				case 1:
					if(typeof this.queryForm.name != 'undefined' && null != this.queryForm.name && '' != this.queryForm.name){
						this.paramsBase.name = this.queryForm.name;
					}else{
						this.paramsBase.name = '';
					}
					this.handleBaseArea();
					this.queryReset(); 
				  	break;
				case 2:
					if(null != this.queryForm.name && '' != this.queryForm.name && typeof this.queryForm.name != 'undefined'){
						this.paramsContent.name = this.queryForm.name;
					}else{
						this.paramsContent.name = '';
					}
					this.handleArticle();
					this.queryReset();
				  	break;
				case 3:
					if(null != this.queryForm.name && '' != this.queryForm.name && typeof this.queryForm.name != 'undefined'){
						this.paramsProduct.name = this.queryForm.name;
					}else{
						this.paramsProduct.name = '';
					}
				  	this.handleProduct();
				  	this.queryReset();
				  	break;	
				 }
  			},
  			/**
  			 * 本地链接选中一行数据展示选中标题
  			 */
  			handleBaseChange(val){
  				this.selectBannerVO = val;
  				switch(this.selectLocalLinkType){
					case 1:
					  	if(null != this.selectBannerVO &&　'' != this.selectBannerVO){
						  	this.titles = this.selectBannerVO.name;
					  	}else{
					  		this.titles = '';
					  	}
					  	break;
					case 2:
						if(null != this.selectBannerVO && '' != this.selectBannerVO){
						  	this.titles = this.selectBannerVO.title;
						}else{
							this.titles = '';
						}
					  	break;
					case 3:
						if(null != this.selectBannerVO && '' != this.selectBannerVO){
						  	this.titles = this.selectBannerVO.name;
						}else{
							this.titles = '';
						}
					  	break; 	
					}
  			},
  			/**
  			 * 本地链接确定按钮带入数据
  			 */
			bannerDataModalInsert(){
				//如果没有选中
				if(null == this.selectBannerVO){
					this.$message.error("请至少选择一个");
					return;
				}
				this.bannerDataModal = false;
				this.isShowUrl == 0;
				switch(this.selectLocalLinkType){
					case 1:
						this.bannerForm.moduleId = this.selectBannerVO.id
						this.bannerForm.title = this.selectBannerVO.name;
						this.bannerForm.moduleType = 1;
						this.bannerForm.bannerType = 2;
 						this.axios.get('/ws/ops/bases/'+this.selectBannerVO.id).then(response =>{
 							var res = response.data;
					        var resMeta = res.meta;
					        if(0 == resMeta.code) {
					          	this.bannerForm.fileId = res.data.fileId;
					        } else {
					        	this.$Message.warning(resMeta.message);
					        }
 						});
					  	break;
					case 2:
						this.bannerForm.moduleId = this.selectBannerVO.id;
						this.bannerForm.moduleType = 2;
						this.bannerForm.title = this.selectBannerVO.name;
						this.bannerForm.bannerType = 2;
						this.bannerForm.fileId = this.selectBannerVO.fileId;
					  	break;
					case 3:
						this.bannerForm.moduleId = this.selectBannerVO.id;
						this.bannerForm.title = this.selectBannerVO.name;
						this.bannerForm.moduleType = 3;
						this.bannerForm.bannerType = 2;
					  	this.axios.get('/ws/ms/productSkus/detail/'+this.selectBannerVO.id).then(response =>{
							var res = response.data;
					        var resMeta = res.meta;
					        if(0 == resMeta.code) {
					          	this.bannerForm.fileId = res.data.fileId;
					        } else {
					        	this.$Message.warning(resMeta.message);
					        }
						});
					  	break; 	
					}
			},
			/**
			 * 查询本地基地信息
			 */
			handleBaseArea(){
				//发送查询请求
				let pageSize = this.baseTable.page.pageSize;
				let pageNum = this.baseTable.page.pageNum;
				const _this = this;
		        this.axios.post('/ws/ops/bases?pageNum='+pageNum+'&pageSize='+pageSize, _this.paramsBase).then(function (response) {
					var res = response.data;
			        var resMeta = res.meta;
			        if(0 == resMeta.code) {
			          	_this.buildPageBaseData(res.data);
			        } else {
			        	_this.total = 0;
			        	_this.$Message.warning(resMeta.message);
			        }
		        });
			},
			/**
			 * 构建表格数据
			 */
			buildPageBaseData(data_) {
				this.baseTable.data = data_.list;
				this.baseTable.page.total = data_.total;
			},
			/**
			 * 查询本地新闻信息
			 */
			handleArticle(){
				
				let pageSize = this.contentTable.page.pageSize;
				let pageNum = this.contentTable.page.pageNum;
				const _this = this;
				//发送查询请求
		        this.axios.post('/ws/ops/contents?pageNum=' + pageNum + '&pageSize=' + pageSize, _this.paramsContent).then(function (response) {
					var res = response.data;
			        var resMeta = res.meta;
			        if(0 == resMeta.code) {
			          	_this.buildPageContentData(res.data);
			        } else {
			        	_this.total = 0;
			          	_this.$Message.warning(resMeta.message);
			        }
		        });
			},
			/**
			 * 构建表格数据
			 */
			buildPageContentData(data_) {
				this.contentTable.data = data_.list;
				this.contentTable.page.total = data_.total;
			},
			/**
			 * 查询本地产品信息
			 */
			handleProduct(){
				//发送查询请求
				this.paramsProduct.status=4;
				let pageSize = this.productTable.page.pageSize;
				let pageNum = this.productTable.page.pageNum;
				const _this = this;
		        this.axios.post('/ws/ms/products?pageNum=' + pageNum + '&pageSize=' + pageSize, this.paramsProduct).then(function (response) {
					var res = response.data;
			        var resMeta = res.meta;
			        if(0 == resMeta.code) {
			          	_this.buildPageProductData(res.data);
			        } else {
			        	_this.total = 0;
			          	_this.$Message.warning(resMeta.message);
			        }
		        });
			},
			/**
			 * 构建表格数据
			 */
			buildPageProductData(data_) {
				this.productTable.data = data_.list;
				this.productTable.page.total = data_.total;
			},
		    /**
		     * 重置表单
		     */
		    resetForm() { 
		       if(this.$refs['bannerForm']) {
		          this.$refs['bannerForm'].resetFields();
		       }
		       this.bannerForm.id = '';
		    },
			/* 编辑界面 */
			queryById(rowId){
				const _this = this;
				_this.axios.get('/ws/ops/banners/' + rowId).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 === resMeta.code) {
						_this.bannerForm= res.data;
						if (_this.bannerForm.bannerType == 2) {
							_this.isShowUrl = 0;
						}
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 新增
			 */
			saveDataDict() {
				const _this = this;
				let postData_ = _this.bannerForm;
				_this.axios.post('/ws/ops/banner', postData_).then(function(response) {
					let res = response.data;				
					if(0 === res.meta.code) {
						_this.$Message.success(res.meta.message);
						_this.goback();
					}else{
						let message_ = res.meta.message;
						_this.$Message.warning('新增失败:' + message_);
					}
				});
			},
			/**
			 * 编辑
			 */
			editDataDict() {
				const _this = this;
				let postData_ = _this.bannerForm;
				this.axios.put('/ws/ops/banners', postData_).then(function(response) {
					let res = response.data;				
					if(0 === res.meta.code) {
						_this.$Message.success(res.meta.message);
						_this.goback();
					}else{
						let message_ = res.meta.message;
						_this.$Message.warning('编辑失败:' + message_);
					}
				});
			},
			/*条件插叙表单重置*/
			queryReset(){
				this.formInline = {
					name: ''
				}
			}
	  	}
	}
</script>

<style scoped>
	.ws-form-select {
		width: 80%;
	}
	.edit-button-self{
		margin: 20px;
	}
	#textFont {
		font-size: 20px;
	}
</style>
